<template>
  <div id="app">
      <h3>我是app组件里的内容...</h3>
      <!-- 
        router-link默认会被渲染成a标签,我们希望根据业务场景渲染不同的标签,于是就有了tag属性
       -->
      <router-link to="/home">首页</router-link>
      <router-link to="/about">关于</router-link>
      <!-- params方式传参 -->
      <!-- <router-link :to="'/user/' + userId">用户</router-link> -->
      
      <!-- query方式传参 -->
      <!-- <router-link :to="{path:'/profile',query:{name:'jack',age:19}}">个人中心</router-link> -->

      <!-- <button @click="homeClick">首页</button>
      <button @click="aboutClick">关于</button> -->

      <button @click="userClick">用户</button>
      <button @click="profileClick">个人中心</button>
      <!-- 
        想记住用户点击的状态,要使用 kepp-alive 标签 
        include:指定某个组件使用 keep-alive
        exclude:排除某个组件不适用 keep-alive
       -->
      <keep-alive exclude="Profile">
          <router-view></router-view>
      </keep-alive>

      <!-- <router-view></router-view> -->
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      userId:'tom'
    }
  },
  methods:{
    homeClick(){
       //换一种路由跳转的方式
       this.$router.push('/home')
    },
    aboutClick(){
       this.$router.replace('/about')
    },
    userClick(){
      this.$router.push('/user/' + this.userId)
    },
    profileClick(){
      this.$router.push({
        path:'/profile',
        query:{
          name:'kobe',
          age:40
        }
      })
    }
  }
}
</script>

<style>
  .active{
    color: deeppink;
  }
</style>
